<template>
  <v-card flat>
    <v-layout>
      <v-navigation-drawer
        v-model="drawer"
        :rail="rail"
        permanent
        @click="rail = false"
        theme="dark"
      >
        <v-list-item nav>
          <template v-slot:prepend>
            <v-avatar color="red" @click="goroute('/user')">
              <span class="username">{{ username }} </span>
            </v-avatar>
          </template>

          <v-list-item-title>{{ this.level }}</v-list-item-title>

          <template v-slot:append>
            <v-btn
              variant="text"
              icon="mdi-chevron-left"
              @click.stop="rail = !rail"
            ></v-btn>
          </template>
        </v-list-item>

        <v-list nav>
          <v-list-item
            prepend-icon="mdi-email"
            title="工具箱"
            @click="goroute('/')"
          ></v-list-item>
          <v-list-item
            prepend-icon="mdi mdi-alpha-r-circle-outline"
            title="RPC"
            @click="goroute('/rpc')"
          ></v-list-item>
          <v-list-item
            prepend-icon="mdi-file-document"
            title="MarkDown文档"
            @click="goroute('/md')"
          ></v-list-item
          ><v-list-item
            prepend-icon="mdi-file-document"
            title="about"
            @click="goroute('/about')"
          ></v-list-item>
        </v-list>

        <template v-slot:append>
          <div class="pa-2" v-if="username !== '9527'">
            <v-btn block color="purple" @click="logout">注销</v-btn>
          </div>
          <div class="pa-2" v-if="username == '9527'">
            <v-btn block color="green" @click="login">登录</v-btn>
          </div>
        </template>
      </v-navigation-drawer>

      <v-main>
        <router-view></router-view>
      </v-main>
    </v-layout>
  </v-card>
</template>

<script>
import router from "@/router"; // 导入 Vue Router 实例
import axios from "axios";
export default {
  data() {
    return {
      drawer: true,
      rail: true,
      username: "",
      level: "",
    };
  },
  methods: {
    goroute(e) {
      router.push(e); // 跳转到目标页面的路径
    },

    userinfo() {
      axios
        .get("/api/user") // 发送GET请求到后端API
        .then((response) => {
          this.username = response.data.username;
          const level = String(response.data.level);
          if (level === "1") {
            this.level = "爬虫管理员";
          }
          if (level === "2") {
            this.level = "高级爬虫";
          }
          if (level === "3") {
            this.level = "中级爬虫";
          }
          if (level === "4") {
            this.level = "初级爬虫";
          }
          if (level === "5") {
            this.level = "临时爬虫";
          }
        })
        .catch((error) => {
          // 处理请求错误
          console.log(error);
        });
    },
    logout() {
      axios
        .get("/api/logout") // 发送GET请求到后端API
        .then(() => {
          window.location.replace("/");
        })
        .catch((error) => {
          // 处理请求错误
          console.log(error);
        });
    },
    login() {
      this.$router.push("/login"); // 将路由跳转放在关闭 Snackbar 后
    },
  },
  created() {
    this.userinfo();
  },
};
</script>

<style>
.username {
  font-size: 10px;
  /* 根据需要设置更小的字体大小 */
}
</style>
